<!-- 我的收藏 -->
<template>
	<view class="collection">
		<view class="content" v-if="list.length>0">
			<template v-for="item in list">
				<view class="content_item" @click="go_detail(item.id)">
					<view class="user">
						<view class="img">
							<image :src="userInfo.userInfo.avatar" mode=""></image>
						</view>
						<view class="name">
							<view>{{userInfo.userInfo.username}}</view>
							<view>{{item.created_at}}</view>
						</view>
					
						<!-- 已卖出logo -->
						<!-- <view class="logo"><view>已卖出</view></view> -->
					
						<!-- 收藏 星星 -->
						<view class="star">
							<!-- 未收藏 -->
							<!-- <image src="../../../../../static/images/neighborimg/market/mine/xing_n.png" mode=""></image> -->
							<!-- 已收藏 -->
							<image @click.stop="cancel_collect(item.id)" 
								src="https://community.chuangxiangdianli.com/images/neighborimg/market/mine/xing_s.png"
								mode="">
							</image>
						</view>
					</view>
					<view class="goods">
						<view class="goods_info">
							<view class="goods_name">{{item.goods_name}}</view>
							<view class="goods_price">￥ {{item.goods_price}}</view>
						</view>
						<view class="goods_content">
							{{item.goods_content}}
						</view>
						<view class="goods_img">
							<template v-for="v in item.goods_images">
								<image :src="v" mode=""></image>
							</template>
						</view>
					</view>
				</view>
			</template>
		</view>
		<view class="nodata" v-else>
			<image
			src="https://community.chuangxiangdianli.com/images/empty/nodata.png" mode=""></image>
		</view>
		<u-loadmore :status="status" />
	</view>
</template>

<script>
// 引入封装的请求
import request from '@/utils/request.js'		
export default {
	data() {
		return {
			// 用户信息
			userInfo:{},
			// 商品列表
			list:[],
			// 当前页码
			pageNo:1,
			// 列表个数 
			limit:10,
			// 是否正在请求数据
			is_loading:false,
			// 是否请求完数据
			is_bottom:false,
			// 底部正在加载中
			status: 'loadmore',
		};
	},
	onLoad() {
		this.get_shop_list()
	},
	onShow() {
		let that = this
		uni.getStorage({
			key:'userInfo',
			success:function(res){
				// console.log(res)
				that.userInfo = res.data
			},
			fail:function(res){
				uni.navigateTo({
					url: '/login/bindinguser/index'
				})
			},
		})
	},
	// 页面底部加载
	onReachBottom(){
		let that = this
		this.status = 'loading';
		// console.log(11111)
		if(that.status = 'nomore' || that.is_loading){
			return false
		}
		this.pageNo++
		setTimeout(() => {
			that.get_shop_list(true)
		}, 1000)
	},
	methods:{
		// 取消收藏 
		cancel_collect(id){
			let that = this
			request.post({
				url:'Mini/circle/flea/collectionGoods',
				data:{
					goods_id:id
				}
			}).then(res=>{
				// console.log(res)
				if(res.code==200){
					uni.showToast({
						title:res.data.msg,
						success() {
							that.get_shop_list()
						}
					})
				}
			})
		},
		// 查看商品详情
		go_detail(id){
			uni.navigateTo({
				url:'/neighbor/market/goodsInfo/index?id='+id
			})
		},
		// 获取商品列表
		get_shop_list(turn){
			let that = this
			that.is_loading = true
			request.get('Mini/circle/flea/fleaCollection',{
				page:that.pageNo,
				limit:that.limit,
				state:that.currentIndex
			}).then(res => {
				// console.log('首页数据', res)
				that.is_loading = false
				if (res.code==200) {
					if(turn){
						if(res.data.data.length>0){
							that.list = [
								...that.list,
								...res.data.data
							]
						}
					}else{
						that.list = res.data.data
					}
					if(res.data.count==that.list.length){
						// that.is_boottom = true
						that.status = 'nomore';
					}
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			}).catch(res => {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			})
		}
	}
};
</script>

<style lang="scss">
page {
	background: #f3f5f8;
}
.collection {
	.content {
		width: 100%;
		min-height: 580rpx;
		box-sizing: border-box;
		// padding: 20rpx;
		margin: 14rpx 0;
		.content_item{
			background: #ffffff;
			margin-bottom: 6rpx;
			padding-top: 30rpx;
			padding-bottom: 46rpx;
			padding-left: 26rpx;
			padding-right: 22rpx;
			position: relative;
		}
		.user {
			width: 100%;
			display: flex;
			align-items: top;
			justify-content: flex-start;
			margin-bottom: 20rpx;
			.img {
				width: 20%;
				image {
					width: 94rpx;
					height: 94rpx;
				}
			}
			.name {
				width: 40%;
				view:nth-child(1) {
					font-size: 30rpx;
					font-family: Hiragino Sans GB;
					font-weight: bold;
					color: #333333;
					margin-bottom: 18rpx;
				}
				view:nth-child(2) {
					font-size: 24rpx;
					font-family: Hiragino Sans GB;
					font-weight: normal;
					color: #999999;
				}
			}
			.logo {
				width: 135rpx;
				height: 107rpx;
				background-image: url(https://community.chuangxiangdianli.com/images/neighborimg/market/mine/maichu.png);
				background-size: 100%;
				text-align: center;
				font-size: 22rpx;
				font-family: Microsoft YaHei UI;
				font-weight: bold;
				color: #ffffff;
				line-height: 107rpx;
				view {
					transform: rotate(19deg);
				}
			}
			.star {
				width: 46rpx;
				height: 46rpx;
				position: absolute;
				right: 50rpx;
				top: 24rpx;
			}
		}
		.goods {
			margin-bottom: 20rpx;
			.goods_info {
				width: 100%;
				display: flex;
				align-items: top;
				justify-content: space-between;
				margin-bottom: 10rpx;
				.goods_name {
					font-size: 30rpx;
					color: #333333;
					line-height: 48rpx;
				}
				.goods_price {
					font-size: 36rpx;
					font-family: Hiragino Sans GB;
					font-weight: bold;
					color: #b83d42;
				}
			}
			.goods_content {
				font-size: 30rpx;
				font-family: Hiragino Sans GB;
				color: #333333;
				margin-bottom: 30rpx;
			}
			.goods_img {
				image {
					display: inline-block;
					width: 220rpx;
					height: 220rpx;
					margin-right: 17rpx;
				}
				// margin-bottom: 40rpx;
			}
		}
	}
	.nodata{
		width: 100%;
		display: flex;
		justify-content: center;
		&>image{
			width: 400rpx;
			height: 400rpx;
		}
	}
}
</style>
